<template>
	<kb-layout title="卡券详情">
		<view class="bg-white u-padding-30">
			<view class="text-center">
				<text class="font-weight font-size18"> {{detail.title}}</text>
			</view>
			
			<view class="u-margin-30 u-flex u-flex-center">		
					 <view class="qrcode  u-padding-30">
					 	 <u-qrcode :size="150" :val="detail.qrcode_value"></u-qrcode>
					 </view>
				
			</view>
			<view class="u-margin-top-20">
				<view v-if="detail.is_used==1" class="color-red">
					<text>已使用过</text>
				</view>
				<view class="font-size14 color-gray text-center">
					<text>使用说明：</text>
					<text>景点凭此二维码作为门票凭证。</text>
				</view>
			</view>
			
		</view>
		
		<view class="bg-white u-margin-top-20">
			<view class="title text-center u-padding-30">
				<text class="font-size18 font-weight">使用说明</text>
			</view>
			<view class="u-content u-padding-25 font-size13">
				<up-parse  :tag-style="{ p: 'padding-bottom:30rpx; ' }"
				  :content="detail.content"></up-parse>
			</view>
		</view>
	</kb-layout>
</template>

<script setup>
	import { onMounted, ref } from "vue";
	import {myCouponDetail} from '@/common/api.js';
 
	const showQrModal = ref(true);
	const detail = ref({ }); //券详情数据
	 
	onMounted(()=>{
		
		const props = getCurrentPages().pop();
		const options = props.options;
		myCouponDetail(options.id).then( ret =>{
			 detail.value = ret;
		})
	})
	
 
	
	 
</script>

<style lang="scss">
	.qrcode{
		border: 1px solid #dadada;
	}
</style>